<template>
  <div class="comment">
    <DetailSection title="房客点评" :more="`查看全部${commentModule.totalCount}条评价`">
      <div>
        <div class="header">
          <div class="left">
            <div class="score">
              <span>

              </span>
              <span>{{ number2}}</span>

              <div class="line"></div>
            </div>
            <div class="info">
              <div class="title">{{ commentModule.scoreTitle }}</div>
              <div class="count">{{ commentModule.totalCountStr }}条评论</div>
              <div class="star">
                <van-rate size="12" v-model="commentModule.totalCount" readonly color="#ff9645" />
              </div>
            </div>
          </div>
          <div class="right">
            <template v-for="(item, index) in commentModule.subScores" :key="index">
              <span class="item">{{ item }}</span>
            </template>
          </div>
        </div>
        <div class="tags">
          <template v-for="(item, index) in commentModule.commentTagVo" :key="index">
            <span
              class="item"
              :style="{
                backgroundColor: item.backgroundColor,
                borderColor: item.borderColor,
                color: item.color
              }"
              >{{ item.text }}</span
            >
          </template>
        </div>
        <div class="content">
          <div class="user">
            <div class="avatar"><img :src="commentModule.comment.userAvatars" alt="" /></div>
            <div class="profile">
              <div class="name">{{ commentModule.comment.userName }}</div>
              <div class="data">{{ commentModule.comment.checkInDate }}</div>
            </div>
          </div>
          <div class="text">{{ commentModule.comment.commentDetail }}</div>
        </div>
      </div>
    </DetailSection>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import DetailSection from '@/components/detail-section/detail-section.vue'
  const props = defineProps({
    commentModule: {
      text: Object,
      default: () => ({})
    }
  })


  // 判断评分 如果为一位数加.0
  const number = ref(String(props.commentModule.overall))
  const number2 = ref()
  if (number.value.length == 1) {
    number2.value =  number.value.charAt(0, 1) + '.0'
  } else{
    number2.value = props.commentModule.overall
  }

</script>

<style lang="less" scoped>
  .comment {
    font-size: 12px;

    .header {
      display: flex;
      margin-top: 5px;
      .left {
        display: flex;
        .score {
          width: 65px;
          height: 100%;
          font-size: 48px;
          color: #333;
          position: relative;
          font-weight: 600;
          .line {
            width: 66px;
            height: 6px;
            background: linear-gradient(90deg, #fa8c1d, #fcaf3f);
            border-radius: 3px;
            position: absolute;
            bottom: 6px;
            z-index: 5;
          }
        }
      }
      .info {
        margin-left: 10px;
        .count {
          color: #999;
          margin: 5px 0;
        }
      }
      .right {
        justify-content: flex-end;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        .item {
          margin-left: 10px;
          color: #666;
        }
      }
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      margin: 10px 0;
      .item {
        padding: 3px 5px;
        margin-top: 5px;
        margin-right: 5px;
        border-radius: 8px;
      }
    }
    .content {
      padding: 10px;
      background-color: #f7f9fb;
      border-radius: 6px;
      .user {
        display: flex;

        .avatar {
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
        }
        .profile {
          margin-left: 5px;
        }
        .name {
          font-size: 14px;
        }
        .data {
          color: #999;
          margin-top: 3px;
        }
      }
      .text {
        margin-top: 20px;
        line-height: 16px;
        color: #333;
      }
    }
  }
</style>
